<template>
    <el-dialog v-model="dialogVisible" draggable title="上传失败" width="800px" :close-on-click-modal="false">
        <div class="upload_fail_tip">上传兑换码失败，请重新上传，具体失败原因及源数据如下：</div>
        <ZwTable
            ref="tableRef"
            :option="tableOption"
            :row-key="getRowKey"
            :fetch-params="state.searchParams"
            :fetch-api="fetchApi()"
            tab-h="560px"></ZwTable>
    </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, watch } from 'vue';
import ZwTable from '@/components/zw/table/Table';

const props = withDefaults(defineProps<Props>(), {
    data: () => [],
    modelValue: false
});

const emit = defineEmits(['update:modelValue']);

const tableRef = ref();
const state = reactive({
    searchParams: {
        page: 1,
        page_size: 15
    }
});

const dialogVisible = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

watch(
    () => props.modelValue,
    (val: any) => {
        if (val) {
            tableRef.value?.reload();
        }
    }
);

const tableOption = computed(() => {
    return [
        {
            prop: 'line_num',
            label: '行号',
            width: 130,
            showOverflowTooltip: true
        },
        {
            prop: 'error_msg',
            label: '错误说明',
            width: 280,
            showOverflowTooltip: true
        },
        {
            prop: 'original_data',
            label: '源数据',
            showOverflowTooltip: true
        }
    ];
});

const data = reactive<RowOption[]>([]);

// 自定义表格查询接口
const fetchApi = () => {
    return (params: any) => {
        return new Promise((resolve, reject) => {
            try {
                const { page, page_size } = params;
                data.splice(0);
                data.push(...props.data.slice(page * page_size - page_size, page * page_size));
                resolve({ data, total: props.data.length });
            } catch (err) {
                resolve({ data: [], total: 0 });
                reject(err);
            }
        });
    };
};

const getRowKey = (row: RowOption) => row.line_num;

interface RowOption {
    line_num: number | string;
    error_msg: string;
    original_data: string;
}
interface Props {
    data: any[];
    modelValue: boolean;
}
</script>
<style lang="scss" scoped>
.upload_fail_tip {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #33302d;
    margin-top: 12px;
    margin-bottom: 24px;
}
.zw-table :deep(.el-table) {
    min-width: 360px;
    height: 53vh;
}
</style>
